<template>
	<div class="ShopAccount">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>供应商</el-breadcrumb-item>
			<el-breadcrumb-item>请假申请审批</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow abnormal mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="success" class="fl" @click="toCreated()" round size="mini">创建请假记录</el-button>
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-input class="w_100" v-model="query.staff_name" placeholder="姓名"></el-input>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="query.type" placeholder="请假类型">
									<el-option label="请假" value="1"></el-option>
									<el-option label="休息" value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="query.status" placeholder="审核状态">
									<el-option label="待审核" value="10"></el-option>
									<el-option label="审核成功" value="20"></el-option>
									<el-option label="审核失败" value="30"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="start_date">
								<el-date-picker
									class="w_180i"
									v-model="query.start_date"
									type="date"
									value-format="yyyy-MM-dd"
									format="yyyy-MM-dd"
									placeholder="请假开始日期"
								>
								</el-date-picker> </el-form-item
							>~
							<el-form-item prop="end_date">
								<el-date-picker
									class="w_180i"
									v-model="query.end_date"
									type="date"
									value-format="yyyy-MM-dd"
									format="yyyy-MM-dd"
									placeholder="请假结束日期"
								>
								</el-date-picker>
							</el-form-item>
							<el-form-item prop="start_time">
								<el-date-picker
									class="w_180i"
									v-model="query.start_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="申请开始时间"
								>
								</el-date-picker> </el-form-item
							>~
							<el-form-item prop="end_time">
								<el-date-picker
									class="w_180i"
									v-model="query.end_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="申请结束时间"
								>
								</el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetDataBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="listData" stripe>
						<el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
						<el-table-column prop="staff_name" label="姓名" width="80px"> </el-table-column>
						<el-table-column prop="type" label="请假类型" width="80px">
							<template slot-scope="{ row }">
								<span class="text-danger" v-if="row.type == '1'">请假</span>
								<span class="text-success" v-if="row.type == '2'">休息</span>
							</template>
						</el-table-column>
						<el-table-column prop="date" label="请假日期" width="120px"></el-table-column>
						<el-table-column prop="slot" label="请假时间" width="80px"></el-table-column>
						<el-table-column prop="day" label="请假时长" width="80px">
							<template slot-scope="{ row }">
								<span>{{ row.day }}天</span>
							</template>
						</el-table-column>
						<el-table-column prop="reason" label="请假原因" min-width="200px"></el-table-column>
						<el-table-column prop="add_time" label="申请时间" width="150px"></el-table-column>
						<el-table-column prop="status" label="审核状态" width="80px">
							<template slot-scope="{ row }">
								<span v-if="+row.status == 10">待审核</span>
								<span class="text-success" v-if="+row.status == 20">审核成功</span>
								<span class="text-danger" v-if="+row.status == 30">审核失败</span>
								<span class="text-danger" v-if="+row.status == 40">撤销</span>
							</template>
						</el-table-column>
						<el-table-column prop="fail_reason" label="备注" min-width="200px"></el-table-column>
						<el-table-column label="操作" width="100" fixed="right">
							<template slot-scope="{ row }">
								<el-link v-if="+row.status == 10" :underline="false" type="warning" @click="toAudit(row)">审批</el-link>
								<el-link
									v-if="
										($moment(row.date).isAfter($moment().format('YYYY-MM-DD')) && +row.status == 10) ||
										($moment(row.date).isAfter($moment().format('YYYY-MM-DD')) && +row.status == 20)
									"
									:underline="false"
									type="danger"
									@click="toCancel(row)"
									>撤销</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 审核状态-弹框 -->
		<el-dialog
			:title="auditTitle"
			:visible.sync="auditState"
			width="560px"
			:close-on-click-modal="false"
			:before-close="closeDialog"
		>
			<div class="auditCentent" v-if="auditTitle == '请假审批'">
				<div class="row-info clear" style="margin-bottom: 10px;">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>审核状态：</div>
					<div class="fl list-cont">
						<el-select v-model="audit.status" placeholder="请选择">
							<el-option label="待审核" value="10" disabled></el-option>
							<el-option label="审核成功" value="20"></el-option>
							<el-option label="审核失败" value="30"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">
						<i class="lhadmin lhadmin-wujiaoxing" v-if="audit.status == 30"></i
						>{{ audit.status == 30 ? '驳回原因' : '备注' }}：
					</div>
					<div class="fl list-cont">
						<el-input
							type="textarea"
							:rows="4"
							:cols="32"
							maxlength="50"
							show-word-limit
							v-model="audit.fail_reason"
						></el-input>
					</div>
				</div>
			</div>
			<div class="auditCentent" v-if="auditTitle == '请假申请撤销'">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>备注</div>
					<div class="fl list-cont">
						<el-input
							type="textarea"
							:rows="4"
							:cols="32"
							maxlength="50"
							show-word-limit
							v-model="audit.fail_reason"
						></el-input>
					</div>
				</div>
			</div>

			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" v-if="auditTitle == '请假审批'" @click="auditBtn(1)">确 定</span>
				<span class="btnOK mr_20" v-else-if="auditTitle == '请假申请撤销'" @click="auditBtn(2)">确 定</span>
				<span class="resetBtn" @click="closeDialog()">取 消</span>
			</div>
		</el-dialog>
		<!-- 创建记录-弹框 -->
		<el-dialog
			title="创建请假记录"
			:visible.sync="createdLeave"
			width="560px"
			:close-on-click-modal="false"
			:before-close="closeDialog"
		>
			<div class="auditCentent">
				<div class="row-info clear" style="margin-bottom: 10px;">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>人才姓名：</div>
					<div class="fl list-cont">
						<el-autocomplete
							v-model="create.staff_name"
							:fetch-suggestions="(query, cb) => fetchUserInfo('name', query, cb)"
							:trigger-on-focus="false"
							value-key="staff_name"
							placeholder="请输入姓名"
							@select="handleSelect"
						>
							<template slot-scope="{ item }">
								<div class="name" style="font-size: 14px; line-height: 20px;">{{ item.staff_name }}</div>
								<span class="addr" style="font-size: 12px;">{{ item.mobile }}</span>
							</template>
						</el-autocomplete>
					</div>
				</div>
				<div class="row-info clear" style="margin-bottom: 10px;">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>手机号：</div>
					<div class="fl list-cont">
						<el-input type="text" v-model="create.mobile" @blur="getUserinfo()"></el-input>
					</div>
				</div>
				<div class="row-info clear" style="margin-bottom: 10px;">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>请假类型：</div>
					<div class="fl list-cont">
						<el-select v-model="create.type" placeholder="请选择">
							<el-option label="请选择" value="" disabled></el-option>
							<el-option label="请假" value="1"></el-option>
							<el-option label="休息" value="2"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear" style="margin-bottom: 10px;">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>请假时间：</div>
					<div class="fl list-cont">
						<el-date-picker
							class="w_180i"
							v-model="create.date"
							type="date"
							value-format="yyyy-MM-dd"
							format="yyyy-MM-dd"
							placeholder="开始时间"
						>
						</el-date-picker>
						<el-select v-model="create.rest_day" placeholder="请选择">
							<el-option label="请选择" value="" disabled></el-option>
							<el-option label="上午" value="1,2"></el-option>
							<el-option label="下午" value="3,4"></el-option>
							<el-option label="全天" value="1,2,3,4"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>请假原因：</div>
					<div class="fl list-cont">
						<el-input
							type="textarea"
							:rows="4"
							:cols="32"
							v-model="create.reason"
							maxlength="50"
							:show-word-limit="true"
						></el-input>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="createBtn()">确 定</span>
				<span class="resetBtn" @click="closeDialog()">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchRestList, createRest, ratifyRest, leaveCancel } from '@/api/leave.js'
import { toFetchUsers } from '@/api/user'

export default {
	name: 'PersonnelLeave',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			query: {
				staff_name: '',
				type: '',
				status: '',
				start_date: '',
				end_date: '',
				start_time: '',
				end_time: ''
			},
			listData: [],
			auditState: false,
			createdLeave: false,
			auditTitle: '请假审批',
			audit: {
				sn: '',
				status: '',
				fail_reason: ''
			},
			create: {
				staff_name: '',
				type: '',
				date: '',
				rest_day: '',
				reason: '',
				mobile: '',
				staff_sn: ''
			},
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	created() {
		this.fetchListData()
	},
	mounted() {},
	methods: {
		async fetchListData() {
			try {
				let ret = await fetchRestList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					...this.query
				})
				if (ret.list) {
					// [1]启用 [2]禁用 [其他]异常
					ret.list.forEach(item => {
						if (item.status == 1) {
							item.status_tag = true
						} else if (item.status == 2) {
							item.status_tag = false
						}
					})
					this.listData = ret.list
					this.total = ret.count
				} else {
					this.listData = []
					this.total = 0
				}
			} catch (err) {
				console.log('err:', err)
			}
		},

		shearchBtn() {
			this.pageNum = 1
			this.fetchListData()
		},
		resetDataBtn() {
			this.resetData()
			this.fetchListData()
		},
		resetData() {
			this.pageNum = 1
			for (let key in this.query) {
				this.query[key] = ''
			}
		},
		toCreated() {
			this.createdLeave = true
		},
		toAudit(row) {
			this.auditTitle = '请假审批'
			this.auditState = true
			this.audit.sn = row.sn
			this.audit.status = '' + row.status
			this.audit.fail_reason = row.fail_reason
		},
		async toCancel(row) {
			this.auditTitle = '请假申请撤销'
			this.audit.sn = row.sn
			this.auditState = true
		},
		async auditBtn(type) {
			try {
				if (type == 1) {
					for (let key in this.audit) {
						if (!this.audit[key] && this.audit.status == 30) {
							return this.$message.error('必填项不可为空！')
						}
					}
					await ratifyRest(this.audit)
				} else if (type == 2) {
					console.log(this.audit)
					await leaveCancel({ sn: this.audit.sn, fail_reason: this.audit.fail_reason })
				}

				this.$message.success(type == 1 ? '审批成功' : '撤销成功')

				this.fetchListData()
				this.closeDialog()
			} catch (err) {
				console.log(err)
			}
		},
		async createBtn() {
			try {
				for (let key in this.create) {
					if (!this.create[key]) {
						this.$message.error('必填项不可为空！')
						return
					}
				}
				const rest_day = this.create.rest_day.split(',').length
				let ret = await createRest({
					...this.create,
					day: +rest_day == 4 ? 1 : 0.5
				})
				this.$message.success('创建成功！')
				this.fetchListData()
				this.closeDialog()
			} catch (err) {
				console.log(err)
			}
		},
		closeDialog() {
			this.auditState = false
			this.createdLeave = false
			this.audit = {
				sn: '',
				status: '',
				fail_reason: ''
			}
			for (let key in this.create) {
				this.create[key] = ''
			}
		},
		// 搜索
		async fetchUserInfo(field, query, cb) {
			try {
				let result = await toFetchUsers({
					[field]: query,
					fields: 'id,name,mobile,staff_sn'
				})

				result = result.list.map(it => {
					return {
						staff_sn: it.staff_sn,
						mobile: it.mobile,
						staff_name: it.name
					}
				})
				// 将数据回调回去显示
				cb(result)
			} catch (err) {
				console.log('err', err)
			}
		},
		// 选择下拉数据
		handleSelect(it) {
			this.create.staff_sn = it.staff_sn
			this.create.staff_name = it.staff_name
			this.create.mobile = it.mobile
		},
		async getUserinfo() {
			try {
				if (!this.create.mobile) {
					this.create.staff_name = ''
					return
				}
				let ret = await toFetchUsers({
					mobile: this.create.mobile
				})

				if (+ret.list.length != 0) {
					this.create.staff_name = ret.list[0].name
				} else {
					this.create.staff_name = ''
				}
			} catch (err) {
				console.log(err)
			}
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.fetchListData()
		},
		// 导出
		downloadOrder() {
			let param = $.param({
				...this.query,
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				operation: 'export'
			})
			window.location.href = this.url + '/rest/getList?' + param
		}
	}
}
</script>

<style scoped>
.top {
	display: flex;
	margin-bottom: 20px;
}
.box1 {
	margin-right: 30px;
}

.label-name {
	width: 100px;
	text-align: right;
	font-size: 12px;
	color: #888888;
	line-height: 34px;
	float: left;
}

.label-value {
	font-size: 14px;
	color: #353c48;
	line-height: 34px;
	padding-left: 10px;
	float: left;
}
.money {
	color: #d40505;
	margin-right: 20px;
}
.auditCentent_next {
	display: flex;
	margin-bottom: 10px;
}

.wrap-timeline {
	display: block;
	overflow: auto;
	margin-bottom: 20px;
}

.gys-style {
	font-size: 16px;
	text-align: center;
	background: #4fc5ca;
	padding: 10px 0;
	border-radius: 0px;
	color: #fff;
	position: relative;
	top: -30px;
	width: 500px;
	left: -20px;
}
</style>
<style>
.tableMaxBox .el-table th .el-checkbox__input {
	display: block;
}
</style>



// WEBPACK FOOTER //
// src/components/staff/PersonnelLeave.vue